<template>
  <div class="app-container">
    <simpleTable :listObject='listObject' :pageObj='pageObj' :columnList='columnList'>
      <template slot="topLeft">
        <div class="topSearch_box">
          <div class="search_item">
            <span class="search_label">流程类型</span>
            <el-select size="small" style="width:180px" v-model="search.procDefId" clearable @change="proceDefIdChange">
              <el-option v-for="item in procDefList" :key="item.id" :label="item.name" :value="item.id" />
            </el-select>
            <span class="search_label" style="margin-left:10px">标题</span>
            <el-input style="width:180px" size="small" v-model="search.title" clearable placeholder="请输入标题" />
            <span class="search_label" style="margin-left:10px">状态</span>
            <el-select size="small" style="width:130px" v-model="search.status" clearable>
              <el-option label="未完成" value="0" />
              <el-option label="已完成" value="1" />
            </el-select>
            <span class="search_label" style="margin-left:10px">当前环节</span>
            <el-input style="width:150px" size="small" v-model="search.currActiName" clearable placeholder="请输入当前环节" />
            <span class="search_label" style="margin-left:10px">当前办理人</span>
            <el-input style="width:150px" size="small" v-model="search.currUserName" clearable placeholder="请输入当前办理人" />
          </div>
          <el-button type="primary" size="small" @click="getSearch">查 询</el-button>
          <el-button size="small" @click="resetForm">重 置</el-button>
        </div>
      </template>
      <el-table-column slot="operate" label="操作" align="center" width="120">
        <template slot-scope="scope">
          <div class='operateColumn'>
            <span v-hasPermi="['hnsjfz:bpm-proc-inst:query']" @click="getInfo(scope.row)">审核记录</span>
          </div>
        </template>
      </el-table-column>
    </simpleTable>
    <el-dialog v-dialogDrag class="form_dialog" title="审核记录" :visible.sync="infoVisible" width="1000px" top="5vh" append-to-body :close-on-click-modal='false'>
      <procInstInfo v-if="infoVisible" :rowItem='rowItem'></procInstInfo>
      <div slot="footer">
        <el-button @click="infoVisible = false">关 闭</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import { procdefListAll } from '@/api/hnsjfz/common'
import simpleTable from '@/components/SimpleTable'
import { porcInstPage } from '@/api/system/procInst'
import procInstInfo from '@/views/system/procInst/procInstInfo'
export default {
  props: {

  },
  components: {
    simpleTable,
    procInstInfo
  },
  data() {
    return {
      infoVisible: false,
      rowItem: {},
      listObject: {
        list: [],
        total: 0
      }, // 分页列表
      pageObj: {
        pageSize: 20,
        total: 0,
        pageNo: 1
      },
      columnList: [
        { prop: 'procDefName', label: '流程定义名称', minwidth: '80', align: 'center' },
        { prop: 'title', label: '标题', minwidth: '150', align: 'left' },
        { prop: 'creatorName', label: '发起人', minwidth: '60', align: 'center' },
        {
          prop: 'createTime', label: '发起时间', minwidth: '100', align: 'center',
          formatter: (row) => {
            return row.createTime ? moment(row.createTime).format("YYYY-MM-DD HH:mm:ss") : ''
          }
        },
        {
          prop: 'finishTime', label: '完成时间', minwidth: '100', align: 'center',
          formatter: (row) => {
            return row.finishTime ? moment(row.finishTime).format("YYYY-MM-DD HH:mm:ss") : ''
          }
        },
        {
          prop: 'status', label: '状态', minwidth: '50', align: 'center',
          formatter: (row) => {
            return row.status ? '已完成' : '未完成'
          }
        },
        { prop: 'currActiName', label: '当前办理环节', minwidth: '60', align: 'center' },
        { prop: 'currUserName', label: '当前办理人', minwidth: '60', align: 'center' },
        {
          prop: 'currActiTime', label: '开始办理时间', minwidth: '100', align: 'center',
          formatter: (row) => {
            return row.currActiTime ? moment(row.currActiTime).format("YYYY-MM-DD HH:mm:ss") : ''
          }
        },
        { slot: 'operate', label: '操作' }
      ],
      search: {},
      procDefList: [],
      laborTeamList: [],
      times: []
    };
  },
  computed: {

  },
  watch: {},
  created() {
  },
  mounted() {
    this.getPageList()
    this.getAllprocDef()
  },
  beforeDestroy() {
  },
  methods: {
    getAllprocDef() {
      procdefListAll().then(res => {
        this.procDefList = res.data
      })
    },
    getPageList() {
      porcInstPage({ ...this.pageObj, ...this.search }).then(res => {
        this.listObject = res.data
        this.pageObj.total = res.data.total
      })
    },
    getSearch() {
      if (this.times.length === 2) {
        this.search.beginTime = moment(this.times[0]).format("YYYY-MM-DD")
        this.search.endTime = moment(this.times[1]).format("YYYY-MM-DD")
      }
      this.pageObj.pageNo = 1
      this.getPageList()
    },
    resetForm() {
      this.search = {}
      this.times = []
      this.pageObj.pageNo = 1
      this.getPageList()
    },
    getInfo(row) {
      this.rowItem = row
      this.infoVisible = true
    },
    // 搜索
    searchClick(obj) {

    },
  },
};
</script>

<style scoped lang="scss">
</style>
